import { useRef, useEffect, useState } from "react";
import { Button, List } from "antd";
import "./index.css";

export default function Video1() {
  const data = [
    {
      id: 1,
      src: "../../../public/videos/video.mp4",
      type: "video/mp4",
    },
    {
      id: 2,
      src: "../../../public/videos/video.mp4",
      type: "video/mp4",
    },
    {
      id: 3,
      src: "../../../public/videos/video.mp4",
      type: "video/mp4",
      active: true,
    },
    {
      id: 4,
      src: "../../../public/videos/video.mp4",
      type: "video/mp4",
    },
    {
      id: 5,
      src: "../../../public/videos/video.mp4",
      type: "video/mp4",
    },
    {
      id: 6,
      src: "../../../public/videos/video.mp4",
      type: "video/mp4",
    },
    {
      id: 7,
      src: "../../../public/videos/video.mp4",
      type: "video/mp4",
    },
    {
      id: 8,
      src: "../../../public/videos/video.mp4",
      type: "video/mp4",
    },
    {
      id: 9,
      src: "../../../public/videos/video.mp4",
      type: "video/mp4",
    },
  ];

  const configMap = {
    key: {
      classNames: [],
      activeList: [],
    },
    // key: {
    //   classNames: [],
    //   activeList: [],
    // },
  };

  const [type, setType] = useState<number>(0);
  const [idArr, setIdArr] = useState<Array<number>>([0, 1, 2, 3]);
  const [preIdArr, setPreIdArr] = useState<Array<number>>([0, 1, 2, 3]);

  const handleClick = (index: number) => {
    const dataIndex = index - 1;
    if (type === 0) {
      return;
    }

    if (idArr.includes(dataIndex)) {
      return;
    } else {
      if (idArr.length >= type) {
        const [_, ...list] = idArr;
        setIdArr([...list, dataIndex]);
        if (preIdArr.includes(dataIndex)) {
          return;
        } else {
          const [__, ...prelist] = preIdArr;
          setPreIdArr([...prelist, dataIndex]);
        }
      } else {
        setIdArr([...idArr, dataIndex]);
        setPreIdArr([...preIdArr, dataIndex]);
      }
    }
  };

  const [classMap, setClassMap] = useState({
    container: ["videoContainer flex"],
    main: ["transition-all hidden"],
    menu: [
      "transition-all basis-full border-2 grid grid-flow-row-dense grid-cols-3 grid-rows-3 gap-4",
    ],
  });

  const genClassName = (classNames: Array<string>): string => {
    return classNames.join(" ");
  };

  const layoutAllList = () => {
    setType(0);
    setClassMap({
      container: ["videoContainer flex"],
      main: ["transition-all hidden"],
      menu: [
        "transition-all basis-full border-2 grid grid-flow-row-dense grid-cols-3 grid-rows-3 gap-4",
      ],
    });
  };

  const layoutOneList = () => {
    setIdArr([preIdArr[0]]);
    setType(1);
    setClassMap({
      container: ["videoContainer flex"],
      main: ["transition-all basis-3/4 border-2 grid gap-4 p-8"],
      menu: ["overflow-y-scroll transition-all basis-1/4 border-2"],
    });
  };

  const layoutFourList = () => {
    setIdArr([...preIdArr]);
    setType(4);
    setClassMap({
      container: ["videoContainer flex"],
      main: ["transition-all basis-3/4 border-2 grid grid-cols-2 gap-4 p-8"],
      menu: ["overflow-y-scroll transition-all basis-1/4 border-2"],
    });
  };

  const switchLayout = (type: string) => {
    activeConfig.activeList = idArr;

    const activeConfig = configMap[type];
    setState(activeConfig);

    // 第一次 idArr 0

    if (idArr.length === 0) {
      const list = data.filter((item) => item.active);
      idArr(list);
    } else if (idArr.length > 0 && idArr.length < type.length) {
      // const list = data.filter(item => item.active)
      idArr(activeConfig.activeList);
    } else if (idArr.length > 0 && idArr.length === type.length) {
    }

    // 第二次 idArr 4

    // 界面中
    // state
  };

  return (
    <div className="h-full flex flex-col">
      <div className="tool-bar flex justify-between border-b-4">
        <div></div>
        <div className="space-x-4 p-2">
          <Button type="primary" onClick={switchLayout}>
            平面视频显示
          </Button>
          <Button type="primary" onClick={switchLayout}>
            单视频显示
          </Button>
          <Button type="primary" onClick={switchLayout}>
            四视频显示
          </Button>
        </div>
      </div>

      <div className={genClassName(classMap.container)}>
        <div className={genClassName(classMap.main)}>
          {idArr.map((item) => (
            <div
              className="flex justify-center align-center  border-2"
              key={item}
            >
              <video autoPlay loop>
                <source src={data[item].src} type={data[item].type}></source>
              </video>
            </div>
          ))}
        </div>
        <div className={genClassName(classMap.menu)}>
          {data.map((item) => (
            <div
              key={item.id}
              className={`flex justify-center align-center m-2 border-${
                idArr.includes(item.id - 1) && type !== 0
                  ? "4 border-indigo-500"
                  : "2"
              }`}
              onClick={() => handleClick(item.id)}
            >
              <video autoPlay loop style={{ maxHeight: "100%" }}>
                <source src={item.src} type={item.type}></source>
              </video>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
